import React, { useEffect, useState } from "react";
import Taro, {
  useReachBottom,
  usePullDownRefresh,
  useRouter,
} from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import ItemCard from "@/components/ItemCard";
import ListStatusInfo from "@/components/ListStatusInfo";
import downIcon from "@/images/icon_expansion_down.png";
import upIcon from "@/images/icon_expansion_up.png";

import * as api from "./api";
import "./index.scss";

const Index: React.FC<{}> = () => {
  const [data, setData] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const [isOpen, setIsOpen] = useState(false);
  const [activeKey, setActiveKey] = useState("specialty");
  const router = useRouter();
  const [tabMap, setTabMap] = useState<any>({
    specialty: { text: "高起专", total: null, current: null, data: [] },
    highcost: { text: "高起本", total: null, current: null, data: [] },
    undergraduate: { text: "专升本", total: null, current: null, data: [] },
    graduate: { text: "考研", total: null, current: null, data: [] },
  });

  const getList = async (current_page = 1) => {
    try {
      setLoading(true);
      Taro.showNavigationBarLoading();
      const { result, status } = await api.university_relations_searchschool({
        search_info: JSON.stringify({
          category: activeKey,
          major_id: router.params.major_id,
        }),
        current_page: current_page,
      });
      if (status === "ok") {
        const newTabMap = { ...tabMap };
        newTabMap[activeKey].current = current_page;
        newTabMap[activeKey].data =
          current_page === 1
            ? [].concat(result.data_list)
            : newTabMap[activeKey].data.concat(result.data_list);
        newTabMap[activeKey].total = result.total;
        setTabMap(newTabMap);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      Taro.hideNavigationBarLoading();
      Taro.stopPullDownRefresh();
      setLoading(false);
    }
  };

  useReachBottom(() => {
    if (tabMap[activeKey].data.length < tabMap[activeKey].total) {
      getList(tabMap[activeKey].current + 1);
    }
  });

  useEffect(() => {
    getList(1);
  }, [activeKey]);

  //------------------------------------------------------------------
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    try {
      setLoading(true);
      const { result, status } = await api.university_major_get({
        major_id: router.params.major_id,
      });
      if (status === "ok") {
        setData(result.major_info);
      }
    } catch (err) {
      console.log("err--------->>>", err);
    } finally {
      setLoading(false);
    }
  };

  const goSchoolMajorDetail = (schoolInfo) => {
    const params = {
      majorInfo: data,
      schoolInfo: schoolInfo,
      category:activeKey
    };
    Taro.navigateTo({
      url: `/pages/schoolMajorDetail/index?params=${JSON.stringify(params)}`,
    });
  };

  return (
    <View className="major-detail-page">
      <View className="info-box">
        <View className="info-box-top">
          <Image className="logo" src={data.icons} />
          <View className="name">{data.name}</View>
        </View>
        <View className={isOpen ? "desc desc__open" : "desc"}>
          {data.content}
        </View>
        <View className="toggle" onClick={() => setIsOpen(!isOpen)}>
          <Image className="icon" src={isOpen ? upIcon : downIcon} />
          <View className="text">{isOpen ? "收起详情" : "展开详情"}</View>
        </View>
      </View>

      <View className="tabs">
        {Object.entries(tabMap).map((item) => (
          <View
            key={item[0]}
            className={activeKey === item[0] ? "tab tab__active" : "tab"}
            onClick={() => {
              setActiveKey(item[0]);
            }}
          >
            {item[1].text}
            <View className="line"></View>
          </View>
        ))}
      </View>

      {tabMap[activeKey].data.map((item) => (
        <ItemCard
          onClick={() => goSchoolMajorDetail(item)}
          key={item.id}
          {...item}
          agentList={item.agent_list}
          isShowAgent
        />
      ))}

      <ListStatusInfo
        total={tabMap[activeKey].total}
        dataLength={tabMap[activeKey].data.length}
        loading={loading}
      />
    </View>
  );
};

export default Index;
